<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    group: "广告位置",
    key: "PersonalCenter",
    value: "1",
    label: "个人中心",
  },
  {
    group: "广告位置",
    key: "MustLearnList",
    value: "2",
    label: "必学榜",
  },
  {
    group: "订单状态",
    key: "Used",
    value: "1",
    label: "已使用",
  },
  {
    group: "订单状态",
    key: "Unpayment",
    value: "2",
    label: "未支付",
  },
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
  if (action === 'add') {
    modalVisible.value = true;
  }
};
</script>
<template>
  <umrp-container :gap="16" padding="16px" bg-color="#f2f2f2" height="100%">
    <umrp-breadcrumb :items="['商城管理', '字典列表']"></umrp-breadcrumb>
    <umrp-row :gutter="16">
      <umrp-col :span="4" style="height:100%">
        <umrp-card :border="false" style="height:100%">
          <umrp-container :gap="10">
            <umrp-input-search></umrp-input-search>
            <umrp-menu>
            <umrp-menu-item key="1">广告位置</umrp-menu-item>
            <umrp-menu-item key="2">订单状态</umrp-menu-item>
          </umrp-menu>
          </umrp-container>
        </umrp-card>
      </umrp-col>
      <umrp-col :span="20">
        <umrp-container :gap="16">
          <umrp-search-card>
            <umrp-row :gutter="16">
              <umrp-col :span="8">
                <umrp-form-item label="字典标签">
                  <umrp-input placeholder="请输入字典标签"></umrp-input>
                </umrp-form-item>
              </umrp-col>
              <umrp-col :span="8">
                <umrp-form-item label="字典的键">
                  <umrp-input placeholder="请输入字典的键"></umrp-input>
                </umrp-form-item>
              </umrp-col>
            </umrp-row>
          </umrp-search-card>
          <umrp-card :border="false" @action="handleAction">
            <umrp-table :data="dataList" :action-bar="true" @action="handleAction">
              <template #columns>
                <umrp-table-column title="序号" data-index="id"></umrp-table-column>
                <umrp-table-column title="字典标签" data-index="label"></umrp-table-column>
                <umrp-table-column title="字典的键" data-index="key"></umrp-table-column>
                <umrp-table-column title="字典的值" data-index="value"></umrp-table-column>
                <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
              </template>
              <template #action>
                <umrp-space :size="10">
                  <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
                  <umrp-popconfirm message="您确认删除么？">
                    <umrp-button type="danger">移除</umrp-button>
                  </umrp-popconfirm>
                </umrp-space>
              </template>
            </umrp-table>
          </umrp-card>
        </umrp-container>
      </umrp-col>
    </umrp-row>
    <umrp-modal v-model:visible="modalVisible" :width="500">
      <umrp-container padding="24px 0">
        <umrp-form>
          <umrp-form-item label="字典标签">
            <umrp-input></umrp-input>
          </umrp-form-item>
          <umrp-form-item label="字典的键">
            <umrp-input></umrp-input>
          </umrp-form-item>
          <umrp-form-item label="字典的值">
            <umrp-input></umrp-input>
          </umrp-form-item>
        </umrp-form>
      </umrp-container>
    </umrp-modal>
  </umrp-container>
</template>